<template>
  <div class="customer-buss-form-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card class='type-info-box-card'>
        <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top'>
          <el-row :gutter="10">
            <el-col :md="6" :lg="4">
              <el-form-item label='班组ID' class='typeInfo-el-form-item' prop='TEAMID'>
              <el-input  v-model="queryForm.TEAMID" placeholder="请输入组ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='班组名称' class='typeInfo-el-form-item' prop='TEAMNAME'>
                <el-input v-model="queryForm.TEAMNAME" placeholder="请输入组名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='班组类型' class='typeInfo-el-form-item' prop='TEAMTYPE'>
                <el-select v-model="queryForm.TEAMTYPE" filterable placeholder="请选择班组类型" @change="typeChange">
                  <el-option v-for="item in TeamTypeList" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='班' class='typeInfo-el-form-item' prop='HTEAMID' v-show="showTeam">
                <el-select v-model="queryForm.HTEAMID" filterable placeholder="请选择班" @change="classChange">
                  <el-option v-for="item in STeamTypeList" :key="item.index" :label="item.TEAMID+'-'+item.TEAMNAME"
                    :value="item.TEAMID">
                  </el-option>
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="query">查询</el-button>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class='type-info-bottom'>
        <el-row :gutter="10">
          <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Add')">
            <!-- <el-button type="primary" size="mini"  :style="{'width':'88.56px'}" icon='el-icon-arrow-down' @click="sButton">新增</el-button>
          <el-button type="primary" size="mini"  :style="{'margin-left':'0px'}" icon='el-icon-plus' @click="add(1)" v-show="showButton">新增组</el-button>
          <el-button type="primary" size="mini"  :style="{'margin-left':'0px'}" icon='el-icon-plus' @click="add(2)" v-show="showButton">新增班</el-button> -->
            <el-dropdown trigger="click" @command="handleCommand">
              <el-button type="primary" size="mini">
                新增<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add1" icon='el-icon-plus'>新增组</el-dropdown-item>
                <el-dropdown-item command="add2" icon='el-icon-plus'>新增班</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Edit')">
            <el-button type="primary" size="mini" icon='el-icon-edit' :disabled="currentRow.length!=1" @click="updat">修改
            </el-button>
          </el-col>
          <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Edit')">
            <el-button type="danger" size="mini" icon='el-icon-delete' :disabled="currentRow.length!=1"
              @click="delTeam">删除</el-button>
          </el-col>
        </el-row>
        <!-- 若要使用动态表头 建议在data中单列出table的header内容 在data中监听不到 -->
        <el-table ref="tableData" :data='tableData' header-row-class-name="tableHeaderClass"
          @selection-change="handleCurrentChange" class="tableMarginTop" border>
          <!-- 这里的prop按照返回的字段去更新 -->
          <el-table-column type="selection" width="40px"></el-table-column>
          <el-table-column prop='TEAMID' label='班组ID'>
          </el-table-column>
          <el-table-column prop='TEAMNAME' label='班组名'></el-table-column>
          <!-- <el-table-column prop='TEAMLEVEL' label='级别'></el-table-column> -->
          <el-table-column prop='HTEAMID' label='班' :formatter="dataFormat" v-if="queryForm.TEAMTYPE!='1'">
          </el-table-column>
          <el-table-column prop='TEAMTYPE' label='类型' :formatter="dataFormat"></el-table-column>
          <el-table-column prop='REMARK1' label='备注1'></el-table-column>
          <el-table-column prop='REMARK2' label='备注2'></el-table-column>
        </el-table>
        <div class="box">
          <el-pagination background @current-change="changePage" :current-page="currentPage" :page-size="pageSize"
            layout="total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </div>
      </el-card>
      <!-- 弹窗 -->
      <keep-alive>
        <component :is="dialogList.addDialog" :option="dialogOptions" @refreshTable="query"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import addDialog from "./dialog/addDialog";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  //通讯相关
  import requestYg from "@/common/utils/requestYg";
  import teamManage from "@/message/seat-manage/setaTeam/teamManage";

  export default {
    data() {
      return {
        TeamTypeList: [{
            name: "2-组",
            value: "2"
          },
          {
            name: "1-班",
            value: "1"
          },
        ],
        "TEAMTYPE": {
          "2": "2-组",
          "1": "1-班"
        },
        STeamTypeList: [],
        STeamTypeMap: {},
        paramval: [],
        showButton: false,
        currentRow: [], //表格当前选中行
        loading: false,
        tableData: [],
        showTeam: true,
        tableTotal: undefined,
        currentPage: 1,
        certTypeList: [],
        certTypeMap: {},
        element: [],
        a: [],
        pageSize: getGlobalParams.get("PageSize"),
        queryForm: {
          TEAMID: "",
          TEAMNAME: "",
          TEAMTYPE: "2",
          HTEAMID: ""
        },
        dialogList: {
          //指定被渲染组件列表
          addDialog,
        },
        dialogOptions: {
          //新增//修改
          isShow: false
        },
      };
    },
    mounted() {

    },
    created() {
      this.squery();
      // this.query()
    },
    methods: {
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      sButton() {
        this.showButton = !this.showButton;
      },
      classChange() {},
      typeChange() {
        this.showTeam = (this.queryForm.TEAMTYPE == 2) ? true : false;
        if (this.queryForm.TEAMTYPE == 1) {
          this.queryForm.HTEAMID = "";
        }
        this.query();
      },
      dataFormat(row, column) {
        if (column.property == "HTEAMID")
          return this.STeamTypeMap[row[column.property]];
        if (column.property == "TEAMTYPE")
          return this.TEAMTYPE[row[column.property]];
      },

      // 查询组
      async query() {
        //debugger
        this.loading = true;
        let resBody = new teamManage();
        resBody.data.OPERATION = '4'
        resBody.data.TEAMNAME = this.queryForm.TEAMNAME;
        resBody.data.TEAMID = this.queryForm.TEAMID;
        resBody.data.TEAMTYPE = this.queryForm.TEAMTYPE;
        resBody.data.PAGEFLAG = 4
        resBody.data.CURRPAGE = this.currentPage
        resBody.data.PAGEROWNUM =  this.pageSize
        resBody.data.HTEAMID = this.queryForm.TEAMTYPE=='2'?this.queryForm.HTEAMID:'';
        let response = await requestYg(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode === "000000") {
          this.tableData = response.RSP_BODY.struct;
          this.tableTotal = response.RSP_BODY.TOTALROWNUM;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" +
              response.SYS_HEAD.ReturnCode +
              "，错误信息：" +
              response.SYS_HEAD.ReturnMessage
          });
          this.tableData = [];
          this.tableTotal = 0;
        }

      },
      // 删除班组
      async delTeam() {
        let resBody = new teamManage()
        resBody.data.TEAMID = this.currentRow[0].TEAMID
        resBody.data.TEAMTYPE = this.queryForm.TEAMTYPE
        resBody.data.OPERATION = '3'
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.query()
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 查询上级班组
      squery() {
        this.loading = true;
        let resBody = new teamManage();
        resBody.data.OPERATION = "4";
        resBody.data.TEAMTYPE = "1";
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.STeamTypeList = response.RSP_BODY.struct;
              // console.log(this.STeamTypeList)
              for (let i = 0; i < this.STeamTypeList.length; i++) {
                const element = this.STeamTypeList[i];
                this.STeamTypeMap[element.TEAMID] = element.TEAMNAME;
              }
              this.query();
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码: " +
                  response.SYS_HEAD.ReturnCode +
                  ",错误信息: " +
                  response.SYS_HEAD.ReturnMessage
              });
              this.STeamTypeList = [];
            }

            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })
      },
      // 点击分页页数方法
      changePage(val) {
        this.currentPage = val;
        this.query();
      },
      handleCurrentChange(val) {
        //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
        this.currentRow = val;
      },
      add(val) {
        this.showButton = false;
        //添加
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        
        this.dialogOptions.title = val == '1'? "坐席组信息新增" :'坐席班信息新增';
        this.dialogOptions.name = val == '1'? "组名称" :'班名称';
        this.dialogOptions.log = "1"; //添加
        this.dialogOptions.val = val;
        // this.dialogOptions.STeamTypeList= this.STeamTypeList;
      },
      updat() {
        
        this.dialogOptions.isShow = true;
        this.dialogOptions.isChecked = true;
        this.dialogOptions.currentRow = this.currentRow[0];
        this.dialogOptions.name = this.queryForm.TEAMTYPE == '2'? "组名称" :'班名称';
        this.dialogOptions.title = this.queryForm.TEAMTYPE == '2'? "坐席组信息修改" :'坐席班信息修改';
        this.dialogOptions.log = "2"; //修改
        // this.dialogOptions.STeamTypeList= this.STeamTypeList;
      },
      handleCommand(val) {
        //更多操作按钮的切换
        if (val == "add1") {
          this.add(1);
        } else if (val == "add2") {
          this.add(2);
        }

      },
    },
  };

</script>


<style lang="scss">
  .type-info-bottom {
    margin-top: 10px;
  }

  .box {
    margin-top: 20px;
    text-align: right;
  }

  .el-date-editor.el-input {
    width: 100% !important;
  }

  .el-card {
    overflow: inherit;
  }

</style>
